<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>产品详情</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
	<meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
	<meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
	<meta HTTP-EQUIV="expires" CONTENT="0">
	<link rel="stylesheet" th:href="@{'/static/css/common_1.css?v=' + ${timstamp}}">
	<link rel="stylesheet" th:href="@{'/static/css/product_3.css?v=' + ${timstamp}}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"  media="all">
	<link rel="stylesheet" th:href="@{/static/picbox/picbox.css?v=20210922}"  media="all">
	<script th:src="@{/static/js/jquery-2.1.1.min.js}" charset="utf-8"></script>
	<script th:src="@{/static/layer/layer.js}" charset="utf-8"></script>
	<script th:src="@{/static/picbox/picbox.js?v=20210922}" charset="utf-8"></script>
    <!--layui会引起什么乱子？？？？-->
    <script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
    <script th:src="@{/static/js/parabola.js}" charset="utf-8"></script>
	<style>
		[v-cloak] {display: none;}

	</style>
</head>
<body class="">
<div th:replace="website/template/top.html"></div>

<div class="product-page" id="app" v-cloak>
	<div class="bread-crumb bread-crumb-p">
		<a href="/web/index"><i class="layui-icon layui-icon-home"></i> 分店首页</a>
		<a href="javascript:window.history.back()">分类浏览</a>
		<span class="cur">产品浏览</span>
	</div>
	<div class="product-info" v-if="product.id">
		<div class="layui-col-xs12 layui-col-sm12 layui-col-md5">
			<div class="product-picture" >
				<img class="cover" :src="productCover">
				<div class="control">
					<img class="icon" src="/static/img/icon_album_1.svg" @click="showFloat('visibleAlbum')" v-if="product.filesPath.length > 0">
					<img class="icon" src="/static/img/icon_video_1.svg" @click="showFloat('visibleVideo')" v-if="product.videoPath">
					<a :href="productCover" rel="lightbox-3">
						<img class="icon zoom" src="/static/img/icon_zoom_1.svg" alt="">
					</a>
				</div>
			</div>
		</div>
		<div class="layui-col-xs12 layui-col-sm12 layui-col-md7">
			<!--数据-->
			<div class="product-params ">
				<div class="price">零售价：￥<b>{{product.guidePrice}}</b></div>
				<div class="title">
					{{product.title}}
					<div class="sku-control-text" v-if="skuSelected">
						已选择：{{skuSelectedObject.title}} ￥{{skuSelectedObject.guidePrice}}
					</div>
				</div>
				<!--最低价不要了，只显示零售价-->
                <!--<div class="toggle-link" v-if="!authorize" @click="actQueryAccount">查看更多信息<i class="layui-icon layui-icon-down"></i></div>-->
				<!--<div v-if="authorize"><div class="text">最低零售价：{{product.lowestPrice}}</div></div>-->
				<!--sku操作-->
				<div class="sku-control" >
					<!--<div  class="text" v-if="skuSelected">-->
						<!--已选择： {{skuSelectedObject.title}} ￥{{skuSelectedObject.guidePrice}}-->
					<!--</div>-->
					<!--<div class="text" v-else>请选择子产品</div>-->
					<div class="btn" v-if="skuSelected">
						<button class="btnCart" onclick="putcart()" @click="putCart">
							<img src="/static/img/icon_cart_full.svg" alt="">
							放进购物车
						</button>
					</div>
				</div>
			</div>
			<!--sku-->
			<div class="sku">
				<div
					class="box"
					v-for="item in sku"
					:class="{'hover':item.id==skuSelected}"
					:key="item.id"
					@click="actSelect(item.id)"
				>
					<div class="picture">
						<img  class="cover" :src="imgUriPrefix+item.cover" alt="">
						<a class="zoom" :href="imgUriPrefix+item.cover" rel="lightbox-4">
							<img class="icon" src="/static/img/icon_zoom_1.svg" alt="">
						</a>
					</div>
					<div class="info">
						<div class="sku-price">零售价￥{{item.guidePrice}}</div>
						<div class="sku-title">{{item.title}}</div>
						<!--<div class="price" v-if="authorize">最低价：{{item.lowestPrice}}</div>-->
					</div>
				</div>
			</div>

		</div>

	</div>

	<!--编辑器详情-->

	<div class="product-article" >
		<!--其它功能按钮-->
		<div class="product-another">
			<div class="box" @click="showFloat('visibleVideo')" v-if="product.videoPath">
				<!--<img class="icon" src="/static/img/icon_video2.svg" alt="">-->
				<img class="icon" src="/static/img/icon_video.svg" alt="">
				<span class="title">产品视频</span>
			</div>
			<div class="box" @click="showFloat('visibleAlbum')" v-if="product.filesPath.length > 0">
				<!--<img class="icon" src="/static/img/icon_album2.svg" alt="">-->
				<img class="icon" src="/static/img/icon_album.svg" alt="">
				<span class="title">客户案例</span>
			</div>
		</div>
		<div class="divider">
			<span>图文详情</span>
		</div>
		<div v-html="product.description" v-if="product.description != null"></div>
		<div class="c-gray"  v-if="!product.description">暂无详情</div>
	</div>

	<!--视频层或相册图，图片可能会非常 大，所以这里用v-if-->
	<div class="product-mask" v-if="visibleVideo || visibleAlbum">
		<div class="float-wrap">
			<img src="/static/img/icon_close_3.svg" class="close" @click="hideFloat"/>
			<div class="content">
				<div class="float-video" v-if="visibleVideo">
					<video :src="'/static/'+product.videoPath" controls="controls" height="100%" >
						您的浏览器不支持 video 标签。
					</video>
				</div>
				<div class="float-album" v-if="visibleAlbum">
                    <a v-for="item in product.filesPath" :href="'/static/'+item"  rel="lightbox-1">
                        <img :src="'/static/'+item" alt="">
                    </a>
				</div>
			</div>
		</div>
	</div>
	<!--购物车-->
	<div th:replace="website/template/cart.html"></div>
</div>

</body>
<script th:src="@{'/static/js/cart.js?v=' + ${timstamp}}"></script>
<script th:src="@{/static/js/vue.js}"></script>
<script th:inline="javascript">
const id = [[${id}]]; //使用模板直接注入id
const vm = new Vue({
	el: '#app',
	mixins:[mixinsCommon]
	, data: {
        imgUriPrefix: '/static',
        visibleVideo: false,//显示视频
        visibleAlbum: false,//显示相册

        authorize   : false,//授权访问隐藏信息
		//////////////////////////复杂数据////////////////////////
		product: {
			videoPath:'',//用于页面初始渲染
			filesPath:[],//用于页面初始渲染
		},
		category:{},//分类数据
		sku:[],//sku
		skuSelected : 0 ,//选择的skuid
		skuSelectedObject:{},//选择的sku数据

	},
	computed:{
	    productCover(){
            return this.imgUriPrefix + this.product.cover
            //如果显示当前选择的sku的大图，尽管容器是固定的，但是如果切换的图片高度不一样，并且滚动位置在图片容器的位置
			// 会引起滚动位置的变化，形成屏幕抖动
			// 他妈的折腾了好久找不到原因操你妈的
            // if(this.skuSelected == 0 ){
             //    return this.imgUriPrefix + this.product.cover
			// }else{
             //    return this.imgUriPrefix + this.skuSelectedObject.cover
			// }

		}
	},
	created() {
		this.fetchData()
	},
	methods: {
        //读取商品数据
		fetchData() {
			layerIndex = layer.load(0, {
				// shade: [0, '#fff'] //0.1透明度的白色背景
			});
			$.ajax({
				type: 'get',
				url: '/web/product/get',
				data: {id}
			}).done((res) => {
				if(!res.data.id) layer.msg(res.msg);
				this.product = res.data
				_sku = res.sku.map((item)=> {
				    if( item.cover == ''){
				        item.cover = '/img/notimg.jpg'
					}
					return item
				})
				this.sku = _sku
				this.fetchCategoryData(res.data.categoryId)
                this.$nextTick(() => {
                    setTimeout(() => {
                        $("a[rel^='lightbox']").picbox({/* Put custom options here */}, null, function (el) {
                            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
                        });
                    }, 300)
                })
			}).always(function () {
				setTimeout(() => {
					layer.close(layerIndex)
				}, 500)
			})
		},
		//读取分类数据
		fetchCategoryData(id){
            $.ajax({
                type: 'get',
                url: '/web/category/get',
                data: {id}
            }).done((res) => {
                this.category = res.data
            }).always(function () {

            })
		},


		//请求账号权限
		actQueryAccount() {
			layer.prompt({title: '请输入登录密码', formType: 1}, (text, index)=>{
				layer.close(index);
				$.ajax({
					url: '/web/checkedPwd',
					data: {password: text}
				}).done((res) => {
					if(res==true){
						this.authorize = true
					}else{
						layer.msg('验证不通过')
					}
				}).always(function () {

				})
			});
		},


		//选择型号
		actSelect(id){
			this.skuSelected = id
			this.skuSelectedObject = this.sku.find((item)=>{
				return  item.id == id
			})
		},

        //放进购物车
        putCart(){
		    //找到位分类
		    let _indxCategory = this.cartData.findIndex((item)=> {
                return item.id == this.category.id
            })
			//判断是否有找到分类
		    if(_indxCategory == -1) { //如果没找到，就创建一个新的分类sku
				console.log('没找到分类')
                //当前选中的sku型号数据
                let _skuChoose = this.getSkuSelectedObject()
		    	let  _data = {
					...this.category,
					data:[{..._skuChoose}]
				}
				console.log('塞入新的分类sku：',_data)
				this.cartData.push(_data)
				this.putCartDataToStorrage() //处理数据
				layer.msg('成功放进购物车')
		    } else { //如果找到旧的分类
				console.log('有找到分类')
				//判断是否找到型号
				let _indexSku = this.cartData[_indxCategory].data.findIndex((item)=> {
				    return item.id == this.skuSelected
				})
				if(_indexSku == -1){
				    console.log('没找到sku')
				    let _skuChoose = this.getSkuSelectedObject()
                    this.cartData[_indxCategory].data.push(_skuChoose)
                    this.putCartDataToStorrage() //处理数据
					console.log('放进去之后的sku数组',this.cartData[_indxCategory].data)
                    layer.msg('成功放进购物车')
				}else{
				    layer.msg('已经存在')
				}
		    }
		},

		//根据选择的skuid取得sku数据
		getSkuSelectedObject() {
		    let o =  {...this.sku.find((item)=> {
                    return item.id == this.skuSelected
                })}
			console.log('找到的sku',o,typeof  o)
            delete o.pid
            delete o.guidePriceStr
            delete o.lowestPriceStr
			return o
        },

        //把当前的购物车数据排序，并放进本地存储,并重新赋值
        putCartDataToStorrage(){
		    let _temp = [...this.cartData]
            _temp.sort((a, b) => {
                if (a.sort < b.sort) {
                    return 1
                } else if (a.sort > b.sort) {
                    return -1
                } else {
                    return 0
                }
            })
			this.cartData = _temp
			localStorage.setItem("cart",JSON.stringify(_temp))
		},

		//////////////////////////////////////// 其它 ///////////////////////////////////////////////
		//////////////////////////////////////// 其它 ///////////////////////////////////////////////
		//////////////////////////////////////// 其它 ///////////////////////////////////////////////


        //显示浮动层
        showFloat(key) {
            this[key] = true
			this.triggerLightBox ()//触发相册插件
        },
        //隐藏浮动层
        hideFloat() {
            this.visibleVideo = false
            this.visibleAlbum = false
        },
	}
});

// 元素以及其他一些变量
var eleFlyElement = document.querySelector("#flyItem");
var eleShopCart = document.querySelector("#shopCart");

var numberItem = 0;
// 抛物线运动
var myParabola = funParabola(eleFlyElement, eleShopCart, {
    speed: 200,
    curvature: 0.008, //0.012
    complete: function() {
        eleFlyElement.style.visibility = "hidden";
    }
});

function putcart (){

    // 滚动大小
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;

    eleFlyElement.style.left = event.clientX + scrollLeft + "px";
    eleFlyElement.style.top = event.clientY + scrollTop + "px";
    eleFlyElement.style.visibility = "visible";
    // 需要重定位
    myParabola.position().move();
}
</script>
</html>